@use "../../variables.scss";

.verison-history-wrapper {
  padding: 30px 200px;
}

.timeline {
  text-align: left;
}

.line {
  border-left: 2px solid variables.$border-color;
  height: 35px;
  text-align: left;
  margin-left: 4px;
}

.dot {
  height: 7px;
  width: 7px;
  background-color: variables.$border-color;
  border-radius: 50%;
  margin-left: 2px;
  margin-top: 3px;
  margin-bottom: 3px;
}

.timeline:last-child .line:last-child {
  visibility: hidden;
}

.version-card-header-wrapper {
  .icon-wrapper {
    height: 25px;
  }

  .checkmark-icon::after {
    content: "";
    height: 15px;
    border-left: 2px solid variables.$border-color;
    position: relative;
    bottom: -28px;
    left: 6px;
  }
}

.verison-card-wrapper {
  padding: 10px 0 12px 12px;

  .VerisonCard--Row {
    width: 100%;
  }

  .verison-card {
    border: 1px solid variables.$border-color;
    border-radius: 4px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.06);
    width: 100%;
    transition: box-shadow 0.2s ease-in-out;
  }

  .verison-card-selected {
    border: 1px solid #4990e2;
    background-color: variables.$primary-light-color;
    border-radius: 4px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.06);
    width: 100%;
  }

  .select-view.verison-card:hover {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
  }

  .content-section {
    padding: 15px;
  }

  .merged {
    border-color: #4a4a4a;
    background-color: #fafafa;
    color: #4a4a4a;
    padding: 4px 12px 2px;
    border-radius: 40px;
    border-width: 2px;
    border-style: solid;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
  }

  .pending {
    border-color: #ebb55c;
    background-color: #fffaf3;
    color: #ebb55c;
    padding: 4px 12px 2px;
    border-radius: 40px;
    border-width: 2px;
    border-style: solid;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
  }

  .ignored {
    border-color: #c4c8ca;
    background-color: #fafafa;
    color: #c4c8ca;
    padding: 4px 12px 2px;
    border-radius: 40px;
    border-width: 2px;
    border-style: solid;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
  }
}
